<template>
  <grimm-page title="Card">
    <div slot="content">
      <section>
        <h1 class="example-page-title">基础用法</h1>
        <p class="subheader">包含标题、内容</p>
        <grimm-card :title="title">
          <div slot="cardContent">
            <div>
              <ul>
                <li v-for="(item, index) in foodsList" :key="index">{{index + 1}} - {{item}}</li>
              </ul>
            </div>
          </div>
        </grimm-card>
      </section>

      <section>
        <h1 class="example-page-title">简单卡片</h1>
        <p class="subheader">只有内容区域</p>
        <grimm-card :showTitle="false">
          <div slot="cardContent">
            <div>
              <ul>
                <li v-for="(item, index) in foodsList" :key="index">{{index + 1}} - {{item}}</li>
              </ul>
            </div>
          </div>
        </grimm-card>
      </section>

      <section>
        <h1 class="example-page-title">带Tag</h1>
        <p class="subheader">标题区域右侧可配置Tag</p>
        <grimm-card title="枫桥夜泊酒店" :tag="tag">
          <div slot="cardContent">
            <div class="hotel-id">CRS_ID：swww009888</div>
            <div>区域：华南区-深圳-福田区-华福街道办事处</div>
            <div>地址：广东省深圳市福田区1118号</div>
            <div class="date-wrap">
              <div>任务接收时间：2019-01-01 22:23</div>
              <div>申请评估时间：2019-01-01 22:23</div>
            </div>
          </div>
        </grimm-card>
      </section>

      <section>
        <h1 class="example-page-title">带Footer</h1>
        <p class="subheader">可自定义Footer区域</p>
        <grimm-card title="枫桥夜泊酒店" :tag="tag" :showFooter="true">
          <div slot="cardContent">
            <div class="hotel-id">CRS_ID：swww009888</div>
            <div>区域：华南区-深圳-福田区-华福街道办事处</div>
            <div>地址：广东省深圳市福田区1118号</div>
            <div class="date-wrap">
              <div>任务接收时间：2019-01-01 22:23</div>
              <div>申请评估时间：2019-01-01 22:23</div>
            </div>
          </div>
          <div slot="cardFooter" class="footer-wrap">
            <i class="iconfont more"></i>
            <div class="btn-wrap">
              <grimm-button class="card-btn" type="secondary">查看进度</grimm-button>
              <grimm-button class="card-btn">去处理</grimm-button>
            </div>
          </div>
        </grimm-card>
      </section>

      <section>
        <h1 class="example-page-title">自定义标题栏附加内容</h1>
        <p class="subheader">可自定义Header区域右侧内容</p>
        <grimm-card title="枫桥夜泊酒店" :showFooter="true">
          <div slot="cardTitleRight" class="title-right">提交合作方案</div>
          <div slot="cardContent">
            <div class="hotel-id">CRS_ID：swww009888</div>
            <div>区域：华南区-深圳-福田区-华福街道办事处</div>
            <div>地址：广东省深圳市福田区1118号</div>
            <div class="date-wrap">
              <div>任务接收时间：2019-01-01 22:23</div>
              <div>申请评估时间：2019-01-01 22:23</div>
            </div>
          </div>
          <div slot="cardFooter" class="footer-wrap">
            <i class="iconfont more"></i>
            <div class="btn-wrap">
              <grimm-button class="card-btn" type="secondary">查看进度</grimm-button>
              <grimm-button class="card-btn">去处理</grimm-button>
            </div>
          </div>
        </grimm-card>
      </section>
    </div>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      title: '中午吃啥？',
      foodsList: ['小菜园', '呱呱叫', '新白鹿', '桂满陇', '牛肉面', '黄焖鸡', '绝食了'],
      tag: {
        tagContent: '已上线',
        tagStatus: '',
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="stylus"  scoped>
section {
  margin-bottom: 30px;
}

.subheader {
  margin-bottom: 10px;
}

.title-right {
  position: relative;
  font-size: 12px;
  color: #333;
}

.title-right:before {
  position: absolute;
  left: -16px;
  top: 2px;
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border: 3px solid #1F7ACA;
  border-radius: 50%;
  background: #fff;
}

.hotel-id {
  margin-bottom: 10px;
  padding: 0 3px;
  width: fit-content;
  box-sizing: border-box;
  font-size: 12px;
  border: 1px solid rgba(102, 102, 102, 0.5);
  border-radius: 2px;
}

.date-wrap {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.card-btn {
  min-width: 96px;
  background-color: #fff;
}

.footer-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

